<template>
  <div>
    <div class="setBox" style="height:100%; overflow:hidden; overflow-y:auto;">
      <h3><span>设置各校区学生缴费类型</span></h3>
      <div class="setContent">
        <dl v-for="a in schoolList" :key="a.schoolId">
          <dt><span>{{a.schoolName}}</span></dt>
          <dd>
            <el-select v-model="a.groupId" size="small" style="width:100%" placeholder="请选择">
              <el-option v-for="item in groupList" :key="item.groupId" :label="item.groupName" :value="item.groupId"></el-option>
            </el-select>
          </dd>
        </dl>
        <div class="clear"></div>
        <div class="bts"><el-button style="width:200px;" @click="savePaymentType" type="primary">保存设置</el-button></div>
      </div>
      <div class="explainBox">
        <h3><span>类型说明</span></h3>
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              学生缴费类型1<i style="color:#abb9de; margin:0 0 0 5px" class="header-icon el-icon-info"></i>
            </template>
            <div class="explainBoxN">
            <div>自费生：<el-tag>自费生</el-tag></div>
            <div>公费生：<el-tag>协议公费生</el-tag><el-tag>集团公费生</el-tag></div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              学生缴费类型2<i style="color:#abb9de; margin:0 0 0 5px" class="header-icon el-icon-info"></i>
            </template>
            <div class="explainBoxN">
            <div>自费生：<el-tag>限定区域自费生</el-tag><el-tag>非限定区域自费生</el-tag></div>
            <div>公费生：<el-tag>限定区域协议公费生</el-tag><el-tag>限定区域集团公费生</el-tag><el-tag>非限定区域协议公费生</el-tag><el-tag>非限定区域集团公费生</el-tag></div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              学生缴费类型3<i style="color:#abb9de; margin:0 0 0 5px" class="header-icon el-icon-info"></i>
            </template>
            <div class="explainBoxN">
            <div>自费生：<el-tag>自费生</el-tag></div>
            <div>公费生：<el-tag>限定区域协议公费生</el-tag><el-tag>限定区域集团公费生</el-tag><el-tag>非限定区域协议公费生</el-tag><el-tag>非限定区域集团公费生</el-tag></div>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template slot="title">
              学生缴费类型4<i style="color:#abb9de; margin:0 0 0 5px" class="header-icon el-icon-info"></i>
            </template>
            <div class="explainBoxN">
            <div>自费生：<el-tag>自费生</el-tag><el-tag>限定区域（亚洲）自费生</el-tag><el-tag>非限定区域（欧美）自费生</el-tag><el-tag>日本方向自费生</el-tag><el-tag>英语国家方向自费生</el-tag></div>
            <div>公费生：<el-tag>协议公费生</el-tag><el-tag>集团公费生</el-tag></div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ccc:'缴费类型设置',
      schoolList:[],
      groupList:[],
      activeNames:[]
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取学校缴费类型设置
    getList:function(){
      this.$api.systemSetup.GetPaymentTypeList().then(res=>{
        //console.log("获取学生缴费类型列表",res);
        this.schoolList = res.data.result.schoolList;
        this.groupList = res.data.result.groupList;
      })
    },
    // 保存缴费项设置
    savePaymentType:function(){
      var newList = new Array();
      for(var a=0,len = this.schoolList.length;a<len;a++){
        if(this.schoolList[a].groupId==""||this.schoolList[a].groupId==null||this.schoolList[a].groupId==undefined){
          this.$message({
            message:'请补全学校缴费类型设置',
            type:'warning'
          })
          return ;
        }
        var obg = new Object();
        obg.schoolId = this.schoolList[a].schoolId;
        obg.paymentGroup = this.schoolList[a].groupId;
        newList.push(obg)
      }
      this.$api.systemSetup.SavePaymentType(newList).then(res=>{
        //console.log("保存缴费项设置",res);
        if(res.data.status=='SUCCESS'){
            this.$message({
                message:'保存缴费项设置成功!',
                type: 'success'
            })
            this.getList();
          }else{
            this.$message.error(res.data.message);
          }
      })
    }
  }
}
</script>
